<template>
  <table style="width:100%">
    <tr>
        <td style="width:50%">
            <div class="edit_div">
                <pre v-html='value1' id="edit_pre_1"></pre>
                <textarea id="edit_textarea_1" v-model='value2' @scroll="scrollLeft" ></textarea> 
                <!--这边我们直接用双向绑定 视图更新就不需要担心啦  左右同步滚动我们就用@scroll vue大法好-->
            </div>
        </td>
        <td style="width:50%">
            <div class="edit_div">
                <pre v-html='value3' id="edit_pre_2"></pre>
                <textarea id="edit_textarea_2" v-model='value4' onscroll="test2_scroll()"></textarea>
            </div>
        </td>
    </tr>
</table>
</template>
 
<script> 
    export default {  
    	watch:{  //监听输入文字的变化 value2左边文本域的数据 value4右边文本域数据 监听之后实时赋值 显示文本的不同之处
    		value2(){
    		let op  = this.eq({
    				value1:this.value2,
    				value2:this.value4
    		});
    		this.value1=op.value1;
    		this.value3=op.value2;	
    		},
    		value4(){
    			let op  = this.eq({
    				value1:this.value2,
    				value2:this.value4
    		});
    		this.value1=op.value1;
    		this.value3=op.value2;	
    		}
    	},
    	data(){
    		return{
    			value1:'',
    			value2:'aaa',
    			value3:'',
    			value4:'sss'
    		}
    	},
    	created(){   //初始化对比
    		let op  = this.eq({
    				value1:this.value2,
    				value2:this.value4
    		});
    		this.value1=op.value1;
    		this.value3=op.value2;	
    	 let op1  = this.eq({
    				value1:this.value2,
    				value2:this.value4
    		});
    		this.value1=op1.value1;
    		this.value3=op1.value2;	
    	},
    	methods:{
    	// 同步滚动	
    	scrollLeft(){
    		document.getElementById("edit_pre_1").scrollTop = document.getElementById("edit_textarea_1").scrollTop;
	        document.getElementById("edit_pre_2").scrollTop = document.getElementById("edit_pre_1").scrollTop;
	        document.getElementById("edit_textarea_2").scrollTop = document.getElementById("edit_textarea_1").scrollTop;
    	},
     eq(op) {
        if (!op) {
            return op;
        }
        if (!op.value1_style) {
            op.value1_style = "background-color:#FEC8C8;";
        }
        if (!op.value2_style) {
            op.value2_style = "background-color:#FEC8C8;";
        }
        if (!op.eq_min) {
            op.eq_min = 3;
        }
        if (!op.eq_index) {
            op.eq_index = 5;
        }
        if (!op.value1 || !op.value2) {
            return op;
        }
        var ps = {
            v1_i: 0,
            v1_new_value: "",
            v2_i: 0,
            v2_new_value: ""
        };
        while (ps.v1_i < op.value1.length && ps.v2_i < op.value2.length) {
            if (op.value1[ps.v1_i] == op.value2[ps.v2_i]) {
                ps.v1_new_value += op.value1[ps.v1_i].replace(/</g, "<").replace(">", ">");
                ps.v2_new_value += op.value2[ps.v2_i].replace(/</g, "<").replace(">", ">");
                ps.v1_i += 1;
                ps.v2_i += 1;
                if (ps.v1_i >= op.value1.length) {
                    ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i).replace(/</g, "<").replace(">", ">") + "</span>";
                    break;
                }
                if (ps.v2_i >= op.value2.length) {
                    ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i).replace(/</g, "<").replace(">", ">") + "</span>";
                    break;
                }
            } else {
                ps.v1_index = ps.v1_i + 1;
                ps.v1_eq_length = 0;
                ps.v1_eq_max = 0;
                ps.v1_start = ps.v1_i + 1;
                while (ps.v1_index < op.value1.length) {
                    if (op.value1[ps.v1_index] == op.value2[ps.v2_i + ps.v1_eq_length]) {
                        ps.v1_eq_length += 1;
                    } else if (ps.v1_eq_length > 0) {
                        if (ps.v1_eq_max < ps.v1_eq_length) {
                            ps.v1_eq_max = ps.v1_eq_length;
                            ps.v1_start = ps.v1_index - ps.v1_eq_length;
                        }
                        ps.v1_eq_length = 0;
                        break;//只寻找最近的
                    }
                    ps.v1_index += 1;
                }
                if (ps.v1_eq_max < ps.v1_eq_length) {
                    ps.v1_eq_max = ps.v1_eq_length;
                    ps.v1_start = ps.v1_index - ps.v1_eq_length;
                }
 
                ps.v2_index = ps.v2_i + 1;
                ps.v2_eq_length = 0;
                ps.v2_eq_max = 0;
                ps.v2_start = ps.v2_i + 1;
                while (ps.v2_index < op.value2.length) {
                    if (op.value2[ps.v2_index] == op.value1[ps.v1_i + ps.v2_eq_length]) {
                        ps.v2_eq_length += 1;
                    } else if (ps.v2_eq_length > 0) {
                        if (ps.v2_eq_max < ps.v2_eq_length) {
                            ps.v2_eq_max = ps.v2_eq_length;
                            ps.v2_start = ps.v2_index - ps.v2_eq_length;
                        }
                        ps.v1_eq_length = 0;
                        break;//只寻找最近的
                    }
                    ps.v2_index += 1;
                }
                if (ps.v2_eq_max < ps.v2_eq_length) {
                    ps.v2_eq_max = ps.v2_eq_length;
                    ps.v2_start = ps.v2_index - ps.v2_eq_length;
                }
                if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
                    ps.v1_eq_max = 0;
                }
                if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
                    ps.v2_eq_max = 0;
                }
                if ((ps.v1_eq_max == 0 && ps.v2_eq_max == 0)) {
                    ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1[ps.v1_i].replace(/</g, "<").replace(">", ">") + "</span>";
                    ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2[ps.v2_i].replace(/</g, "<").replace(">", ">") + "</span>";
                    ps.v1_i += 1;
                    ps.v2_i += 1;
 
                    if (ps.v1_i >= op.value1.length) {
                        ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i).replace(/</g, "<").replace(">", ">") + "</span>";
                        break;
                    }
                    if (ps.v2_i >= op.value2.length) {
                        ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i).replace(/</g, "<").replace(">", ">") + "</span>";
                        break;
                    }
                } else if (ps.v1_eq_max > ps.v2_eq_max) {
                    ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i, ps.v1_start - ps.v1_i).replace(/</g, "<").replace(">", ">") + "</span>";
                    ps.v1_i = ps.v1_start;
                } else {
                    ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i, ps.v2_start - ps.v2_i).replace(/</g, "<").replace(">", ">") + "</span>";
                    ps.v2_i = ps.v2_start;
                }
            }
        }
        op.value1 = ps.v1_new_value;
        op.value2 = ps.v2_new_value;
        console.log(op);
        return op;
    }
    }}
    
  
</script>
<style scoped="scoped">
        .edit_div {
            border: 1px solid #CCCCCC;
            overflow: auto;
            position: relative;
            height: 75vh;
        }
 
        .edit_div textarea {
            resize: none;
            background: none repeat scroll 0 0 transparent;
            border: 0 none;
            width: 100%;
            height: 75vh;
            overflow-y: scroll;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
            font-size: 18px;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
          	color: #000000;
        }
 
        .edit_div pre {
            overflow-y: scroll;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
            width: 100%;
            height: 75vh;
            text-align: left;
            color: #ffffff;
            z-index: 10;
            font-size: 18px;
          
        }
</style>
